import { ElInput, ElSelect } from 'element-plus';
import { defineComponent, PropType, computed, ref, watch } from 'vue';
import './prefix-label-select.css';
import { useBpmnData } from '@/store/modules/bpmnData';

const bpmnData = useBpmnData();

const PrefixLabelSelect = defineComponent({
  props: {
    ...ElSelect.props,
    prefixTitle: {
      type: String as PropType<string>,
      default: () => ''
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit, slots }) {
    const computedModelValue = computed({
      get: () => {
        return props.value;
      },
      set: (val) => {
        emit('update:modelValue', val);
      }
    });

    const selectDisabled = ref(false);

    function watchBpmnData() {
      if (props.prefixTitle.includes('处理人')) {
        selectDisabled.value =
          bpmnData.nodeShow === false && bpmnData.skipNode === '${true}';
        if (bpmnData.skipNode === '${true}') {
          props.modelValue = '${PROCESS_START_USER_ID}';
          computedModelValue.value = '${PROCESS_START_USER_ID}';
        } else {
          computedModelValue.value = props.modelValue;
        }
      }
    }

    watchBpmnData();

    watch([() => bpmnData.skipNode, () => bpmnData.nodeShow], () => {
      watchBpmnData();
    });

    return () => (
      <div class="prefix-label-select-container">
        {props.prefixTitle && (
          <div class="prefix-title ">{props.prefixTitle}</div>
        )}
        <ElSelect
          class="prefix-label-select"
          v-model={computedModelValue.value}
          {...props}
          disabled={selectDisabled.value}
          v-slots={slots}
        />
      </div>
    );
  }
});

export default PrefixLabelSelect;
